<template>
    <div class="discount_main">
             <ul class="mui-table-view"
              v-infinite-scroll="loadMore"
              infinite-scroll-disabled="loading"
              infinite-scroll-distance="3"
             >
				<li class="mui-table-view-cell mui-media" v-for="item in list" :key="item.productId">
					<router-link :to="'/discount/details_menu/'+item.productId">
						<div v-html="item.productImg2"></div>
						<div class="mui-media-body">
							<span>{{ item.productName }}</span>
							<p class='mui-ellipsis'>{{ item.productInfo2 }}</p>
                            <div class="bottom_info"><span>{{ item.productPinkage }}</span><span>{{ item.productComCount }}</span><span>{{ item.productTime }}</span></div>
                            
						</div>
					</router-link>
				</li>
                <p v-if="flag" class="main_over">没有更多了.....</p>
             </ul>

    </div>
</template>
<style lang="less">
.discount_main{
    margin-top: 50px;
    height: 500px;
    //  background-color: #fff;
    img{
         height: 100px;
         width: 100px;
         float: left;
     }
    .mui-table-view .mui-media-object{
    line-height: 100px;
    max-width: 100px;
    height: 100px;
     
}
.mui-media-body{
    >p{
        margin-top: 30px;
    }
}
.bottom_info{
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 3px 10px;
    :nth-child(1){
        color: red;
    }
}
.main_over{
    width: 100%;
    text-align: center;
    font-size: 17px;
    color: firebrick;

}
}
</style>
<script>
export default {
    data() {
        return {
            list:[],
            page :1,
            flag:false
        }
    },
    created(){
        this.getData();
        // this.getLikai();
    },
    methods:{
        loadMore() {
                this.loading = true;
                this.page=this.page+1;
                // setTimeout(() => {
                    this.getData();
                    // this.loading = false;
                // }, 2500);
            },
        getData(){
            this.$http.get("api/getmoneyctrl?pageid="+this.page).then(function(response){
                
                if(response.body.result.length==0){
                    this.loading = true;
                     this.flag = true
                     console.log(11111)
                    return
                }
                if(response.body.result[0].productName ==""){
                    response.body.result[0].productName="北京--北京"
                }
                this.list = this.list.concat(response.body.result)
                this.loading = false;
            })
        },
        
    }
}
</script>
